﻿<!DOCTYPE html>  
<html>  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>100%喜帖-Sign Of Love</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/css/bootstrap.min.3.5.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/signOfLove.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/h5_style.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/swiper.css">
    <link rel="stylesheet" href="${request.contextPath}/resources/css/lightbox.css">
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="${request.contextPath}/resources/js/flexible.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?type=quick&ak=IeptSRWHoB4ZGPmT7wpXB36vDpdqnU86&v=1.0"></script>
</head>  
 
<body>
    <div class="body">
        <div class="bj1">
            <div class="bj1_name">
                <div class="bj1_name_man">${invitation.bridegroom!'李 雷'}</div>
                <div class="bj1_name_women">${invitation.bride!'韩梅梅'}</div>
            </div>
            <div class="bj1_main">
                <div class="bj1_main_time">${invitation.weddingDay_Y!'2016'}-${invitation.weddingDay_M!'05'}-${invitation.weddingDay_D!'20'}</div>
                <div class="bj1_main_address">${invitation.address!'北京市朝阳区建国门外大街'}${invitation.hotel!'国贸大酒店'}</div>
            </div>
            <div class="bj1_openMap"></div>
            <div class="bj1_open">
                <div class="bj1_open_music">
                    <img id="bj1_music_img" src="${request.contextPath}/resources/image/signOfLove/music.png" alt="">
                     <#if invitation.backgroundMusic??>
		                <audio id="background-music" src="${request.contextPath}/${invitation.backgroundMusic}" autoplay="autoplay" loop="loop">
		                    你的浏览器不支持audio标签。
		                </audio>
					<#else>
		                <audio id="background-music" src="${request.contextPath}/resources/music/hljxq.mp3" autoplay="autoplay" loop="loop">
                        	你的浏览器不支持audio标签。
                    	</audio>
					</#if>
                </div>
                <div class="bj1_open_menu"><img id="bj1_menu_menu_img" src="${request.contextPath}/resources/image/signOfLove/menu.png" alt=""></div>
            </div>
            <div class="bj1_content">
                <div class="bj1_content_name">
                    <div class="bj1_content_name_man">${invitation.bridegroom!'李 雷'}</div>
                    <div class="bj1_content_name_women">${invitation.bride!'韩梅梅'}</div>
                </div>
            </div>
            <div class="bj1_content_time">
                <span class="bj1_content_time_1">${invitation.weddingDay_Y!'2016'}-${invitation.weddingDay_M!'05'}-${invitation.weddingDay_D!'20'}</span>
                <span class="bj1_content_time_1">${invitation.startTime_HR!'11'}:${invitation.startTime_MIN!'30'}</span>
                <span class="bj1_content_time_2">${invitation.countDown!'36'}</span>
            </div>
        </div>
        <div class="bj2">
            <div class="bj2_myimg">
            	<#if invitation.loveStoryPicture??>
            		<a href="${request.contextPath}/retrieve/${invitation.loveStoryPicture}" data-lightbox="roadtrip">
            			<img src="${request.contextPath}/retrieve/${invitation.loveStoryPicture}">
            		</a>
            	<#else>
            		<a href="${request.contextPath}/resources/image/signOfLove/myimg.jpg" data-lightbox="roadtrip">
            			<img src="${request.contextPath}/resources/image/signOfLove/myimg.jpg" alt="">
            		</a>
            	</#if>
            </div>
            <div class="bj2_mytext">
                <#if invitation.loveStoryContent??>
	        		<#if invitation.loveStoryContent != "">
					  	${invitation.loveStoryContent}
					<#else>
						在最美好的年华遇到彼此，<br>相知相恋，<br/>相约一生一起走。<br>感谢命运让我们相遇，<br>期待您的到来，<br>与我们一起拉开新生活的序幕。
					</#if>
				<#else>
		              在最美好的年华遇到彼此，<br>相知相恋，<br/>相约一生一起走。<br>感谢命运让我们相遇，<br>期待您的到来，<br>与我们一起拉开新生活的序幕。
				</#if>
            </div>
            <div class="bj2_video">
                <#if invitation??>
				<#if invitation.loveStoryVideo != "">
					<video id="my-video" src="${request.contextPath}/retrieve/${invitation.loveStoryVideo}" controls="controls">
                        您的浏览器不支持 video 标签。
                    </video>
				<#else>
					<video id="my-video" src="${request.contextPath}/resources/music/MVI_4508.MOV" controls="controls">
                    	您的浏览器不支持 video 标签。
                	</video>
				</#if>
				<#else>
					<video id="my-video" src="${request.contextPath}/resources/music/MVI_4508.MOV" controls="controls">
                    	您的浏览器不支持 video 标签。
                	</video>
				</#if>
                <!--<div class="bj2_video_btn"><img src="${request.contextPath}/resources/image/tiffanyBlue/video_btn.png" alt=""></div>-->
            </div>
        </div>
        <div class="bj3">
            <div class="bj3_lunbo">
            <div id="lunbo-animation">
                <div>
                    <div class="swiper-container">
                        <!-- Additional required wrapper -->
                        <div class="swiper-wrapper">
                            <!-- Slides -->
							<#if invitation.weddingPhotos??>
							     <#list invitation.weddingPhotos as weddingPhoto>
	   	                             <div class="swiper-slide">
	   	                                 <a href="${request.contextPath}/retrieve/${weddingPhoto}" data-lightbox="roadtrip">
	   	                                     <img src="${request.contextPath}/retrieve/${weddingPhoto}" alt="">
	   	                                 </a>
	   	                             </div>
								 </#list>
							<#else>
	                             <div class="swiper-slide">
	                                 <a href="${request.contextPath}/resources/image/img_001.jpg" data-lightbox="roadtrip">
	                                     <img src="${request.contextPath}/resources/image/img_001.jpg" alt="">
	                                 </a>
	                             </div>
	                             <div class="swiper-slide">
	                                 <a href="${request.contextPath}/resources/image/img_002.jpg" data-lightbox="roadtrip">
	                                     <img src="${request.contextPath}/resources/image/img_002.jpg" alt="">
	                                 </a>
	                             </div>
	                             <div class="swiper-slide">
	                                 <a href="${request.contextPath}/resources/image/img_004.jpg" data-lightbox="roadtrip">
	                                     <img src="${request.contextPath}/resources/image/img_004.jpg" alt="">
	                                 </a>
	                             </div>
	                             <div class="swiper-slide">
	                                 <a href="${request.contextPath}/resources/image/img_003.jpg" data-lightbox="roadtrip">
	                                     <img src="${request.contextPath}/resources/image/img_003.jpg" alt="">
	                                 </a>
	                             </div>
							</#if>
                        </div>
                        <!-- If we need pagination -->
                        <div class="swiper-pagination swiper-pagination-white"></div>

                        <!-- If we need navigation buttons -->
                        <div class="swiper-button-prev swiper-button-white"></div>
                        <div class="swiper-button-next swiper-button-white"></div>

                        <!-- If we need scrollbar -->
                        <!--<div class="swiper-scrollbar"></div>-->
                    </div>
	            </div>
            </div>
        </div>
        <!-- lunbo end-->
            <!-- <div class="bj3_time">${invitation.countDown!'36'}</div> -->
            <div class="bj3_blessing">
                <ul id="greetingMessage">
                    <#if weddingInvitationComments??>
                		<#list weddingInvitationComments as comment>
	                		<li>
		                        <div class="bj3_blessing_information">
		                            <span class="bj3_blessing_information_name">${comment.userName}</span>
		                            <span class="bj3_blessing_information_time">${comment.createdDate} ${comment.createdTime}</span>
		                        </div>
		                        <div class="bj3_blessing_comments">${comment.comment}</div>
		                    </li>
                		</#list>
                	<#else>
	                	<li>
	                        <div class="bj3_blessing_information">
	                            <span class="bj3_blessing_information_name">豆豆</span>
	                            <span class="bj3_blessing_information_time">2016-01-01 10:00:30</span>
	                        </div>
	                        <div class="bj3_blessing_comments">亲爱的要幸福哦</div>
	                    </li>
                	</#if>
                </ul>
            </div>
            <div class="bj3_add">
                <div class="bj3_add_btn"></div>
            </div>
            <div class="bj3_Map">
                <div id="baidu_Map"></div>
            </div>
            <div class="bj3_address">
                <span class="bj3_address_h1">赴宴地址：</span>
                ${invitation.address!'北京市朝阳区建国门外大街'}${invitation.hotel!'国贸大酒店'}
            </div>
        </div>
        <div class="bj_img">
            <div class="bj_img_2wm"><img src="${request.contextPath}/resources/image/2weima.png" alt=""></div>
        </div>
        <input type="hidden" id="weddingAddress4MapSearch" value="${invitation.address!'北京市朝阳区建国门外大街'}${invitation.hotel!'国贸大酒店'}">
        </div>                        
        <!--Modal-->
        <div class="modal fade in" id="addMessage" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;">
            <div class="modal-dialog modal-sm" role="document" style="margin: 1rem;">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="addMessage_wrapper">
                                <div class="addMessage_layout">
                                    <div class="addMessage_header">
                                        <h4>祝福留言</h4>
                                        <div class="addMessage_span">
                                            <img src="${request.contextPath}/resources/image/loveIsAnswer/login_small.png">
                                        </div>
                                    </div>

                                    <div class="form-group" style="margin-bottom: 30px;">
                                        <input type="text" id="commentName" class="form-control reste_input_addMessage" placeholder="请输入姓名">
                                    </div>
                                    <div class="form-group" style="margin-bottom: 30px;">
                                        <textarea class="form-control reste_input_addMessage" rows="5" id="commentValue" placeholder="留下您的祝福吧！"></textarea>
                                    </div>
                                    <div style="margin: 0 auto; text-align: center;">
                                        <button type="submit" class="submit_btn" id="commentButton">确  认</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal -->
        <div class="modal fade" id="openMap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-sm" role="document" style="margin: 1rem;">
                <div class="modal-content">
                    <div class="modal-header" style="border: none; padding: 0; height: 0"></div>
                    <div class="modal-body" style="padding-top: 0;">
                        <div class="card_map_box" style="overflow: hidden;">
                            <div id="allmap2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


<script src="${request.contextPath}/resources/js/jquery-2.1.4.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="${request.contextPath}/resources/js/bootstrap.min.js"></script>
<script src="${request.contextPath}/resources/js/islider.js"></script>
<script src="${request.contextPath}/resources/js/islider_desktop.js"></script>
<script src="${request.contextPath}/resources/js/common.js"></script>
<script src="${request.contextPath}/resources/js/function.js"></script>
<script src="${request.contextPath}/resources/js/lightbox.js"></script>
<script src="${request.contextPath}/resources/js/swiper.jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
       var url = '${request.contextPath}/wx/getJsSDKConfig';
	   var targetUrl = window.location.href;
	    $.post(url,{'targetUrl':targetUrl},function(config){
	        if(!window.jsApiList){
	            window.jsApiList = config.jsApiList;
	        }
	         wx.config({
	              debug: false,
	              appId: config.appId,
	              timestamp: config.timestamp, 
	              nonceStr: config.nonceStr, 
	              signature: config.signature, 
	              jsApiList: window.jsApiList
	          });
	 
	        wx.error(function(res) {
	            //$.scojs_message(res.errMsg, $.scojs_message.TYPE_ERROR);
	            //alert("error");
	        });
	    })
    	
        Map();//开启地图
        Map2();//开启地图
         //islider1.bindMouse();//轮播动画开启
        var mySwiper = new Swiper ('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                nextButton: '.swiper-button-next',
                prevButton: '.swiper-button-prev',
                spaceBetween: 30,
                effect : 'coverflow',
				slidesPerView: 1.8,
				centeredSlides: true,
				coverflow: {
				            rotate: 30,
				            stretch: 1,
				            depth: 60,
				            modifier: 2,
				            slideShadows : true
				        }
            });
			$('#my-video').load();
			
			/**
        $('#my-video').on('click',function(){
            var video = document.getElementById('my-video');
            if(video.paused) {
                video.play();
                $('.bj2_video_btn').hide();
            }
            else {
                video.pause();
                $('.bj2_video_btn').show();
            }
            return false;
        });
        $('.bj2_video_btn').on('click',function(){
            var video = document.getElementById('my-video');
            if(video.paused) {
                video.play();
                $('.bj2_video_btn').hide();
            }
            else {
                video.pause();
                $('.bj2_video_btn').show();
            }
            return false;
        });**/

        $('.bj3_add_btn').on('click',function(){
            $('#addMessage').modal();
        });
        $('.bj1_openMap').on('click',function(){
            $('#openMap').modal();
            setTimeout(function() {//添加延时加载。解决问题
                Map2();//开启地图
            },300);
        });
        $(".bj1_open_music").click(function(){
            var music = document.getElementById("background-music");
            if(music.paused){
                music.play();
                $("#bj1_music_img").attr("src","${request.contextPath}/resources/image/signOfLove/music.png");
            }else{
                music.pause();
                $("#bj1_music_img").attr("src","${request.contextPath}/resources/image/signOfLove/music2.png");
            }
        });
        
        $('#commentButton').on('click',function(){
			$.ajax({  
		        type : "POST",  //提交方式  
		        url : "${request.contextPath}/cards/${invitation.weddingInvitationId}/comments",//路径 ,
				data : 'commentName='+$('#commentName').val() + '&commentValue='+$('#commentValue').val(),
		        success : function(result) {//返回数据根据结果进行相应的处理  
		            if(result.status == 'success'){
					    $('#addMessage').trigger("click");
					    if($("#greetingMessage").find("li").size() == 0){
					        $("#greetingMessage").append('<li><div class="bj3_blessing_information"><span class="bj3_blessing_information_name">'+$('#commentName').val()+'</span><span class="bj3_blessing_information_time">'+new Date().format("yyyy-MM-dd hh:mm")+'</span></div><div class="bj3_blessing_comments">'+$('#commentValue').val()+'</div></li>');
					    }else{
						    $('<li><div class="bj3_blessing_information"><span class="bj3_blessing_information_name">'+$('#commentName').val()+'</span><span class="bj3_blessing_information_time">'+new Date().format("yyyy-MM-dd hh:mm")+'</span></div><div class="bj3_blessing_comments">'+$('#commentValue').val()+'</div></li>').insertBefore($("#greetingMessage").find("li").get(0));
					    }
					}else{
					    alert('添加失败');
					}
		        }  
		    });
        });
        
        var sj=false;
        $('.bj1_open_menu').click(function(){
            if (!sj) {
                $('.body').animate({top:0},1000);
                $('#bj1_menu_menu_img').attr('src','${request.contextPath}/resources/image/signOfLove/menu2.png');

                sj=true;
            }else{
                $('.body').animate({top:'-10.7rem'},1000);
                $('#bj1_menu_menu_img').attr('src','${request.contextPath}/resources/image/signOfLove/menu.png');
                sj=false;
            }
        })
    });
	
	wx.ready(function () {
	   var shareTitle = '${invitation.bridegroom!'李 雷'}&${invitation.bride!'韩梅梅'},我们结婚啦';
	   var shareDesc = '邀请您参加我们的婚礼';
	   var shareLink = window.location.href;
	   var shareImgUrl = 'http://www.100hunqing.cn/hunqing/retrieve/${invitation.loveStoryPicture}';
		
	   wx.onMenuShareTimeline({
		    title: shareTitle, // 分享标题
		    link: shareLink, // 分享链接
		    imgUrl: shareImgUrl, // 分享图标
		    success: function () { 
		        // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    }
		});
		
		wx.onMenuShareQQ({
		    title: shareTitle, // 分享标题
		    desc: shareDesc, // 分享描述
		    link: shareLink, // 分享链接
		    imgUrl: shareImgUrl, // 分享图标
		    success: function () { 
		       // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		       // 用户取消分享后执行的回调函数
		    }
		});
		
		wx.onMenuShareAppMessage({
		    title: shareTitle, // 分享标题
		    desc: shareDesc, // 分享描述
		    link: shareLink, // 分享链接
		    imgUrl: shareImgUrl, // 分享图标
		    type: '', // 分享类型,music、video或link，不填默认为link
		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		    success: function () { 
		        // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    }
		});
		
		wx.onMenuShareQZone({
		    title: shareTitle, // 分享标题
		    desc: shareDesc, // 分享描述
		    link: shareLink, // 分享链接
		    imgUrl: shareImgUrl, // 分享图标
		    success: function () { 
		       // 用户确认分享后执行的回调函数
		    },
		    cancel: function () { 
		        // 用户取消分享后执行的回调函数
		    }
		});
		
		if(${invitation.isPayed!99} == 1){
	    	wx.showOptionMenu();
         }else{
         	wx.hideOptionMenu();
         }
	         
	});

</script>  
</body>  
</html>